<template>
  <div class="q-pa-md">
    <div style="color: blue">
      <fieldset>
        <legend>quickItems</legend>
        <button @click="handlershowAutoFilterRow">
          showAutoFilterRow
          <!-- ({{ fasrTreeList.showAutoFilterRow}}) -->
        </button>
        <div>
          <q-checkbox v-model="recursive" /> 递归
        </div>
        <div>
          <q-checkbox v-model="allowSelectAll" /> 全选
        </div>
        <div>
          <q-checkbox v-model="allowColumnResizing" /> 调整列宽
        </div>
        <div>
          <q-checkbox v-model="lazyItems" /> 懒加载
        </div>
        <!-- <fieldset>
          <legend>分级码</legend>
          <q-checkbox v-model="IsClassiFicationSteps" /> 固定分级码步长
          <div>
            <q-input v-if="IsClassiFicationSteps" v-model="ClassiFicationStep"></q-input>
            <q-input v-if="!IsClassiFicationSteps" v-model="ClassiFicationStepRule"></q-input>
          </div>
        </fieldset> -->
        <button @click="debuggerHandler">DEBUGGER</button>
        <button @click="() => { dataSource = [] }">Clear</button>
        <button @click="loadRoot">Root</button>
        <button @click="() => { fasrTreeList.query() }">查询</button>
        <t-select v-model="selectMode" :options="[
          { label: 'single', value: 'single' },
          { label: 'multiple', value: 'multiple' },
          { label: 'none', value: 'none' }]"></t-select>
        {{ selectMode }}
        {{ rootValue }}
        <t-tree-list height="500" ref="fasrTreeList" :selectMode='selectMode' :columnMinWidth="100"
          :recursiveSelection="recursive" :allowSelectAll="allowSelectAll" columnResizingMode="widget"
          :lazyItems="lazyItems" dataStructure="plain" :allowColumnResizing="allowColumnResizing"
          :showAutoFilterRow="showAutoFilterRow" :columns=columns :rows="dataSource" key-expr="ID" levelKeyExpr="Code"
          parent-id-expr="PID" hasItemsExpr="_hasChildCode_" :rootValue="rootValue"
          :isClassiFicationSteps="IsClassiFicationSteps" :classiFicationStep="ClassiFicationStep"
          :classiFicationStepRule="ClassiFicationStepRule" :loading="loading" @request="request" @lazyLoad="lazyLoad">
        </t-tree-list>
      </fieldset>
    </div>
  </div>
</template>

<script>

import { result, transform } from 'lodash';
import { computed, ref, onMounted } from 'vue';
import { tasks, employees, priorities } from './data.ts';
import tree from './tree.json';

import { DxColumn, DxFilterRow, DxColumnFixing } from 'devextreme-vue/tree-list';

export default {
  components: {
    DxColumn,
    DxFilterRow,
    DxColumnFixing
  },
  setup() {

    function flattenTree(tree) {
      let flattened = [];

      function traverse(node, PID) {
        flattened.push({ ...node, PID: PID, _hasChildCode_: node.children.length != 0 });
        if (node.children && node.children.length > 0) {
          node.children.forEach(child => traverse(child, node.ID));
        }
      }

      tree.forEach(node => traverse(node, "0"));

      return flattened;
    }

    const treeData = flattenTree(tree.users);

    const lazyLoad = (lazyCode) => {
      return treeData.filter(f => { return f.PID === lazyCode })
    }

    // const dataSource = ref(lazyLoad("0"));
    const dataSource = ref([]);

    const columns = ref(['Name', 'Code'].map(key => ({
      dataField: key,
      caption: key,
      width: '100px',
    })))

    const fasrTreeList = ref(null);
    const fasBtn = ref(null);

    let Widget = {};
    onMounted(() => {
      Widget.fasrTreeList = fasrTreeList.value;
      window.Widget = Widget;
    });

    const handlershowAutoFilterRow = () => {
      Widget.fasrTreeList.showAutoFilterRow = !Widget.fasrTreeList.showAutoFilterRow;
    }

    const vm = {
      dataSource,
      fasrTreeList,
      columns: ref(['Name', 'Code'].map(key => ({
        dataField: key,
        caption: key,
        width: '100px',
      }))),
      lazyItems:ref(false),
      allowColumnResizing:ref(false),
      showAutoFilterRow: ref(false),
      selectMode: ref('none'),
      recursive: ref(false),
      allowSelectAll: ref(false),
      handlershowAutoFilterRow,
      debuggerHandler() {
        alert("debugger")
        debugger;
      },
      IsClassiFicationSteps:ref(true),
      ClassiFicationStep:ref(3),
      ClassiFicationStepRule: ref("2-3-3"),
      loading: ref(false),
      rootValue: ref("0"),
      /** 出码取数逻辑 */
      request() {
        if (vm.lazyItems.value) {
          vm.loadRoot();
        } else {
          vm.dataSource.value = treeData;
        }
      },
      loadRoot() {
        debugger;
        vm.loading.value = true;
        setTimeout(() => {
          console.log(Widget.fasrTreeList.getQuickFilter(`{
    "ElementType": "Group",
    "Filters": [{
            "ElementType": "Filter",
            "Code": "DO_Codes.Code",
            "Condition": "fixedlengthcontains",
            "Value": "1101__"
        }
    ]
}`))
          let lazyData = lazyLoad(vm.rootValue.value)
          vm.dataSource.value = lazyData
          vm.loading.value = false;
        }, 1000);
      },
      lazyLoad() {
        vm.loading.value = true;
        setTimeout(() => {
          console.log(Widget.fasrTreeList.getQuickFilter(`{
    "ElementType": "Group",
    "Filters": [{
            "ElementType": "Filter",
            "Code": "DO_Codes.Code",
            "Condition": "fixedlengthcontains",
            "Value": "1101__"
        }
    ]
}`))
          let lazyData = lazyLoad(Widget.fasrTreeList.getLazyCode())
          vm.dataSource.value = [...vm.dataSource.value, ...lazyData]
          vm.loading.value = false;
        }, 1000);
      }
    };
    return vm;
  },
};
</script>
